<template>
  <div ref="dom" class="charts chart-bar"></div>
</template>

<script>
import echarts from 'echarts'
import tdTheme from './theme.json'
import { on, off } from '@/libs/tools'
echarts.registerTheme('tdTheme', tdTheme)
export default {
  name: 'ChartBar',
  props: {
    value: Object,
    text: String,
    subtext: String
  },
  data () {
    return {
      dom: null
    }
  },
  methods: {
    resize () {
      this.dom.resize()
    }
  },
  mounted () {
    this.$nextTick(() => {
      let data = ['数据一']
      let value = [0.03]
      let arr = (new Array(value.length)).fill(1)
      let option = {
        backgroundColor: '#F7F7F7',
        grid: {
          top: '8%',
          left: '0%',
          right: '0%',
          bottom: '10%'
        },
        tooltip: {
          show: false
        },
        xAxis: {
          type: 'value',
          min: 0,
          max: 1,
          axisLine: {
            show: false
          },
          splitLine: {
            show: false
          },
          axisLabel: {
            show: false
          },
          axisTick: {
            show: false
          }
        },
        yAxis: {
          show: false,
          type: 'category',
          inverse: true,
          splitLine: {
            show: false
          },
          axisLine: {
            show: false
          },
          axisLabel: {
            show: true,
            interval: 10,
            margin: 20,
            textStyle: {
              color: '#ffffff',
              fontSize: 116,
              fontWeight: 'bold'
            }
          },
          axisTick: {
            show: false
          },
          data: data
        },
        series: [{
          // 渐变数据内容
          type: 'bar',
          barWidth: 30,
          color: '#13BE9B',
          animationDuration: 1000,
          label: {
            show: false
          },
          data: value,
          z: 0
        },
        {
          // 背景柱状图
          type: 'bar',
          barWidth: 30,
          barGap: '-100%',
          animation: false,
          itemStyle: {
            normal: {
              borderWidth: 0,
              color: '#E6E6E6',
              opacity: 0.6
            }
          },
          data: arr,
          z: 0
        },

        {
          // 辅助分割图形
          type: 'pictorialBar',
          barWidth: 30,
          symbol: 'rect',
          symbolMargin: '200%', // 控制分割图形的大小
          symbolSize: [4, '100%'],
          symbolOffset: [-0.5, 0],
          symbolRepeat: true,
          animation: false,
          itemStyle: {
            normal: {
              color: '#F7F7F7',
              borderWidth: 0
            }
          },
          data: arr,
          z: 1
        }
        ]
      }
      this.dom = echarts.init(this.$refs.dom, 'tdTheme')
      this.dom.setOption(option)
      on(window, 'resize', this.resize)
    })
  },
  beforeDestroy () {
    off(window, 'resize', this.resize)
  }
}
</script>
